<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间紧迫感，提示用户进行某一个行为操作。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-countdown :time="24 * 60 * 60 * 1000" format="h:m:s" autoStart millisecond @timeup="handleTimeup"></fu-countdown>
			</view>
		</fu-section>
		
		<fu-section title="自定义格式" customClass="fu-m-t-20" type="line">
			<fu-countdown :time="48 * 60 * 60 * 1000" format="D天 h时 m分 s秒" autoStart></fu-countdown>
		</fu-section>
		
		<fu-section title="毫秒级渲染" customClass="fu-m-t-20" type="line">
			<fu-countdown :time="24 * 60 * 60 * 1000" format="h:m:s:SSS" autoStart millisecond></fu-countdown>
		</fu-section>
		
		<fu-section title="自定义样式" customClass="fu-m-t-20" type="line">
			<fu-countdown :time="24 * 60 * 60 * 1000"
				format="h:m:s"
				autoStart
				millisecond
				@change="handleChange">
				<view class="custom-time">
					<text class="custom-time__item">{{ timeData.hours > 10? timeData.hours: '0' + timeData.hours }}</text>
					<text class="custom-time__doc">:</text>
					<text class="custom-time__item">{{ timeData.minutes }}</text>
					<text class="custom-time__doc">:</text>
					<text class="custom-time__item">{{ timeData.seconds }}</text>
				</view>
			</fu-countdown>
		</fu-section>
	
		<fu-section title="自由控制开始/暂停" customClass="fu-m-t-20" type="line">
			<demo-desc>通过ref调用 start开始函数、pause暂停函数、reset重置函数</demo-desc>
			<view class="fu-m-t-20">
				<fu-countdown ref="countdownRef" :time="3* 1000" format="s:SSS" :autoStart="false" millisecond @timeup="handleTimeup"></fu-countdown>
			</view>
			
			<view class="fu-flex fu-gap-30 fu-m-t-30">
				<fu-button width="100%" type="success" @click="handleReset">重置</fu-button>
				<fu-button width="100%" @click="handleStart">开始</fu-button>
				<fu-button width="100%" type="error" @click="handlePause">暂停</fu-button>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	// data数据
	const countdownRef = ref();
	let timeData = ref({});
	
	// methods方法
	const handleTimeup = () => {
		uni.$fu.toast('时间到了')
	};
	
	const handleChange = (e) => {
		timeData.value = e;
	};
	
	// 开始
	const handleStart = () => {
		countdownRef.value.start()
	};
	
	// 暂停
	const handlePause = () => {
		countdownRef.value.pause()
	};
	
	// 重置
	const handleReset = () => {
		countdownRef.value.reset()
	};
</script>

<style lang="scss" scoped>
	.custom-time {
		display: flex;
		align-items: center;
		
		&__item {
			padding: 10rpx;
			background-color: #2979ff;
			border-radius: 5rpx;
			color: #ffffff;
		}
		
		&__doc {
			color: #2979ff;
			margin: 0 4px;
		}
	}
</style>